import Select from "../../packages/select";
import CardOption from "../../packages/card-option";

const renderOptions = (label) => ({
  render() {
    return <CardOption label={label} value={label} />;
  },
});

describe("Select", () => {
  it("卡片选项filterable有效", () => {

    cy.mount(Select, {
      propsData: {
        filterable: true,
        value: "",
      },
      slots: {
        default: ["blue", "red", "green"].map((item) => renderOptions(item)),
      },
    });

    cy.get(".z-input__inner").click();
    cy.get(".z-input__inner").type("b");
    cy.get(".z-select-dropdown__card-item:visible")
      .should("have.length", 1)
      .first()
      .should("contain", "blue");
  });

  it('卡片选项 多选', () => {
    const onChangeSpy = cy.spy().as('onChangeSpy');
    cy.mount(Select, {
      propsData: {
        filterable: true,
        value: [],
        multiple: true,
      },
      slots: {
        default: ["blue", "red", "green"].map((item) => renderOptions(item)),
      },
      listeners: {
        change: onChangeSpy
      }
    })    
    cy.get(".z-select__input").click();
    cy.get(".z-select-dropdown__card-item")
      .first()
      .click()
    cy.get('@onChangeSpy').should("have.been.calledWith", ["blue"])
    cy.get('@vue').invoke('setProps', {
      value: ['blue']
    })
    cy.get(".z-select-dropdown__card-item")
      .first()
      .should('have.class', 'selected');

    // check icon exists
    cy.get(".z-select-dropdown__card-item")
    .first()
    .then(($el) => {
      const win = $el[0].ownerDocument.defaultView;
      const afterPseudoElement = win.getComputedStyle($el[0], '::after');
      const afterContent = afterPseudoElement.getPropertyValue('content');
      expect(afterContent).to.not.be.empty;
    });
  })
});
